<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">班级管理</el-breadcrumb-item>
      <el-breadcrumb-item>班级信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-row :gutter="40">
        <el-col span="4">班级名称：</el-col>
        <el-col span="9">
          <el-input v-model="querytxt" clearable>
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col span="4">
          <el-button type="primary">添加班级</el-button>
        </el-col>
      </el-row>
      <el-row class="showdata">
        <el-table :data="tableData" style="width: 100%" stripe border>
          <el-table-column prop="id" label="编号"> </el-table-column>
          <el-table-column prop="name" label="班级名称"> </el-table-column>
          <el-table-column prop="number" label="班级人数"> </el-table-column>
          <el-table-column prop="startTime" label="开班日期"> </el-table-column>
          <el-table-column prop="endTime" label="结束日期"> </el-table-column>
          <el-table-column label="操作">
            <template>
              <el-link class="link" type="primary">修改</el-link>
              <el-link class="link" type="danger">删除</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      querytxt: "",
      tableData: [
        {
          id: 1001,
          name: "java一般",
          number: 40,
          startTime: "2011-1-1",
          endTime: "2014-1-1"
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.box-card {
  margin-top: 10px;
}
.link {
  padding: 10px;
}
.showdata{
  margin-top: 10px;
}
</style>>
